<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>
            小米商城学习制作
		</title>
		<link rel="stylesheet" href="img/icon/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="css/xiaomi.css"/>
	</head>
	<body>
		<!-- header部分 -->
		<div class="big">
		<div class="header w">
			
			<ul>
				<li class="fl"><a href="#">小米商城<span>丨</span></a></li>
				<li class="fl"><a href="#">MIUI<span>丨</span></a></li>
				<li class="fl"><a href="#">loT<span>丨</span></a></li>
				<li class="fl"><a href="#">云服务<span>丨</span></a></li>
				<li class="fl"><a href="#">金融<span>丨</span></a></li>
				<li class="fl"><a href="#">有品<span>丨</span></a></li>
				<li class="fl"><a href="#">小爱开放平台<span>丨</span></a></li>
				<li class="fl"><a href="#">企业团购<span>丨</span></a></li>
				<li class="fl"><a href="#">资质证照<span>丨</span></a></li>
				<li class="fl"><a href="#">协议规则<span>丨</span></a></li>
				<li class="fl"><a href="#">下载app<span>丨</span></a></li>
				<li class="fl"><a href="#">Select Location</a></li>
			</ul>
			
			
			<ul>
				<li class="fr"><a href="#" class="shop"><i class="fa fa-cart-plus"></i> 购物车 (0)<span>丨</span></a></li>
				<li class="fr"><a href="#">消息通知<span>丨</span></a></li>
				<li class="fr"><a href="#">注册<span>丨</span></a></li>
				<li class="fr"><a href="#">登录<span>丨</span></a></li>
			</ul>
			
		</div>
		</div>
		<!-- nav部分 -->
		<div class="nav  w">
			<div class="left fl"><a href="#"></a></div>
			<div class="center fl">
				<ul>
					<li class="fl"><a href="#">小米手机</a></li>
					<li class="fl"><a href="#">Remide红米</a></li>
					<li class="fl"><a href="#">电视</a></li>
					<li class="fl"><a href="#">笔记本</a></li>
					<li class="fl"><a href="#">家电</a></li>
					<li class="fl"><a href="#">路由器</a></li>
					<li class="fl"><a href="#">智能硬件</a></li>
					<li class="fl"><a href="#">服务</a></li>
					<li class="fl"><a href="#">社区</a></li>
				</ul>			
				</div>
			<div class="right fr">
				<input type="text" placeholder="手机"/><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
			</div>
		</div>
		<!-- banner部分 -->
		<div class="banner w">
			<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cd53d3541a73e3c5efb500d611a988ad.jpeg?thumb=1&w=1533&h=575&f=webp&q=90" class="image w">
			<div class=" fl">
				<ul>
					<li><a href="#">手机卡 电话卡</a></li>
					<li><a href="#">电视 盒子</a></li>
					<li><a href="#">笔记本 显示器 平板</a></li>
					<li><a href="#">家电 插线板</a></li>
					<li><a href="#">出行 穿戴</a></li>
					<li><a href="#">智能 路由器</a></li>
					<li><a href="#">电源 配件</a></li>
					<li><a href="#">健康 儿童</a></li>
					<li><a href="#">耳机 音箱</a></li>
					<li><a href="#">生活 箱包</a></li>
				</ul>
			</div>
			
		</div>
		<!-- pic部分 -->
		<div class="pic w ">
			<div class="pic1 fl">
				<ul>
					<li class="fl b1"><a href="#"><img src="img/biao.png" height="24"width="24" alt=""><span>小米秒杀</span></a></li>
					<li class="fl b2"><a href="#"><img src="img/lou.png" height="24"width="24" alt=""><span>企业团购</span></a></li>
					<li class="fl b3"><a href="#"><img src="img/zimu.png" height="24"width="24" alt=""><span>F码通道</span></a></li>
					<li class="fl b4"><a href="#"><img src="img/mifenka.png"height="24"width="24" alt=""><span>米粉卡</span></a></li>
					<li class="fl b5"><a href="#"><img src="img/yijiuhuanxin.png"height="24"width="24" alt=""><span>以旧换新</span></a></li>
					<li class="fl b6"><a href="#"><img src="img/huafei.png" height="24"width="24" alt=""><span>话费充值</span></a></li>
				</ul>
			</div>
			<div class="pic2 fl"><a href="#" class="product"><img src="img/pic1.jpg" ></a></div>
			<div class="pic3 fl"><a href="#" class="product"><img src="img/pic2.jpg" ></a></div>
			<div class="pic4 fl"><a href="#" class="product"><img src="img/pic3.jpg" ></a></div>
		</div>
		<!-- main部分 -->
	<div id="major">
		
	<div class="main w">
		<div class="biaoti fl ">
			<h2>小米闪购</h2>
			
		</div>
		<div class="tubiao fr">
			<i class="fa fa-chevron-left" aria-hidden="true"></i>
			<i class="fa fa-chevron-right" aria-hidden="true"></i>
		</div>
	</div>
	<div class="seckil w">
		<div class="one fl">
			<div class="text1">14:00场</div>
			<div><img src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1
MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5j
ZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1
bWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1N
OkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIy
Qzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFF
OEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94Onht
cG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pE
cHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHf
S48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuY
jRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQN
JbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzIL
ijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7
KnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1L
bN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNc
xDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7V
kBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgU
Kc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2E
cnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ
7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII=" >
		</div>
		<div class="text2">
			距离结束还有
		</div>
		<div class="text3">
			<span id="hour">00</span>
			<i>：</i>
			<span id="min">00</span>
			<i>：</i>
			<span id="second">00</span>
			
			
		</div>
		</div>
		<div class="two fl">
			<img src="img/pms.jpg" height="200" width="200" >
		<div class="name">
			<p>六笠智能杀菌筷筒 白色</p>
		</div>
		<div class="xingneng"><p>医用紫外线波长,安静风干</p></div>
		<div class="jiage">
		<span class="xianjia">99元</span>
		<span class="yuanjia">129元</span>
		</div>
		</div>
		<div class="there"></div>
		<div class="four"></div>
		<div class="five"></div>
	</div>
	</div>
	</body>	
	<script>
	var myVar=setInterval(function(){time()},1000);
	
	function time(){
		var h=new Date();
		var t=h.getHours();
		var tm=h.getMinutes();
		var ts=h.getSeconds();
		document.getElementById("hour").innerHTML=t;
		
		document.getElementById("min").innerHTML=tm;
		document.getElementById("second").innerHTML=ts;
	}
	</script>
</html>
